<template>
  <div id="login_wrap">
    <div class="imgbox">
      <el-popover placement="top-start" title width="100" trigger="hover">
        <p class="logo_item">获取权限</p>
        <p class="logo_item">退出</p>
        <img slot="reference" class="logoImg" :src="imgUrl" alt />
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      imgUrl: require("@/assets/images/login/loginImg.gif")
    };
  }
};
</script>  

<style lang="stylus">
.el-popover {
  min-width: 80px !important;
  padding: 12px 0
  .logo_item{
      line-height: 30px
      cursor: pointer
      padding: 0 12px
      &:hover{
        background-color: #e6f7ff
        }
    }
}
</style>

<style lang="stylus" scoped>
#login_wrap {
  position: relative;
  padding: 5px 0;
  .imgbox {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
